<template>
	<div class="login">
		<div class="main">
			<img src="../../assets/bear.png" />
			<div class="detail">
				<strong>{{msg}}</strong>
				<p>Get access to the best reclpes now,
				   become a member today.
				</p>
				<input type="text" name="username" placeholder="Student_Id" v-model="sid" id="p1" /><br />
				<input type="password" name="password" placeholder="Password" v-model="pwd" id="p2" /><br />
				<router-link to='#' @click.native="log">
					<button type="submit" >Sign in</button>
				</router-link>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		name:'login',
		data:function(){
			return {
				msg:'Sign in',
				sid:'',
				pwd:''
			}
		},
		methods:{
			log(){
				localStorage.setItem('student',this.sid)
				localStorage.setItem('password',this.pwd)
				if(this.sid==='123456'&&this.pwd==='123456'){
					console.log("没问题")
					this.$router.replace('/stuManager')
				}else{
					alert("学生id或密码错误！")
					this.$router.replace('/login')
				}
			},
		},
		directives:{
			'focus':{
		      bind:function(el){
				  el.focus()
			  }
			}
		}
	}
</script>

<style scoped>
	.main{
		background-color: white;
		width: 1032px;
		height: 660px;
		margin: 0 auto;
		box-shadow: darkgray 0px 0px 30px; 
		position: relative;
		margin-top: 60px;
	}
	.main img{
		float: left;
		width: 516px;
		height: 660px;
	}
	.detail{
		width: 420px;
		height: 660px;
		/* position: absolute; */
		float: right;
		overflow: hidden;
		position: relative;
	}
	.detail strong{
		float: left;
		font-size:50px;
		color: black;
		margin-top: 100px;
		overflow: hidden;
	}
	.detail p{
		display: block;
		width: 255px;
		height: 48px;
		float: left;
		text-align: left;
		overflow: hidden;
		margin-top: 50px;
		font-size: 16px;
	}
	.detail input{
		outline: none;
		border: none;
		border-bottom: 3px solid blanchedalmond;
		color: darkgray;
		width: 255px;
		height: 52px;
		font-size: 25px;
	}
	#p1{
		position: absolute;
		
		
		left: 0px;
		top: 360px;
		
	}
	#p2{
		position: absolute;
		top: 440px;
		left: 0px;
	}
	.detail input:first-child{
		top: 10px;
	}
	
	.detail input::-webkit-input-placeholder {
		font-size: 25px;
		color: #DCDFE6;
	}
	.detail button{
		position: absolute;
		right: 110px;
		bottom: 80px;
		background-color: blanchedalmond;
		color: white;
		width: 106px;
		height: 35px;
		border: none;
		outline: none;
		border-radius: 3px;
	}
	.detail input:hover{
		transition: all ease 1s; 
		opacity: 0.3;
		border-bottom-color: red;
		/* transition-duration: 2s; */
	}
	.detail input:focus{
		border-bottom-color: red;
	}
	button:hover{
		background-color: red;
		transition: all ease .5s;
		opacity: 0.5;
	}
</style>
